<template>
	<div class="tab">
		<div @click="routerLink(item)" :class="$route.name === item.url ? 'active' : ''" v-for="item in tabList"
			 :key="item.id">
			<span :class="'iconfont ' + item.icon"></span>
			<span class="name">{{ item.name }}</span>
		</div>
	</div>
</template>

<script>
export default {
	name: 'tab',
	components: {},
	data() {
		return {
			tabList: [
				{name: '首页', id: 1, url: 'index', icon: 'iconbiaoqiankuozhan_shouye-386'},
				{name: '分类', id: 2, url: 'type', icon: 'iconfenlei'},
				{name: '购物车', id: 3, url: 'cart', icon: 'iconbuoumaotubiao40'},
				{name: '我的', id: 4, url: 'me', icon: 'iconwode'},
			]
		};
	},
	watch: {},
	computed: {},
	created() {

	},
	mounted() {

	},
	methods: {
		routerLink(item) {
			this.$router.push(`/${item.url}`);
		}
	}
};
</script>

<style lang="scss" scoped>
.tab {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  height: 3.6rem;
  display: flex;
  justify-content: space-around;
  align-content: center;
  border: 1px solid #E9E9E9;
  background-color: #fff;

  div {
    display: flex;
    flex-direction: column;
    text-align: center;

    .iconfont {
      font-size: 1.5rem;
      margin: 2px 0;
      padding-top: 3px;
    }

    .name {
      font-size: 0.9rem;
    }
  }

  .active {
    color: #60609c;
  }
}
</style>